<template>
    <view class="dengLoadingVue">
        <view class="maskVueHiddenShow">
            <view class="maskVueHiddenShowWrapper">
                <view class="loader">
                		<view class="inner one"></view>
                		<view class="inner two"></view>
                		<view class="inner three"></view>
                </view>
				<view class="loding">
					数据加载中，请稍后...
				</view>
            </view>
        </view>
    </view>
</template>

<script>
	
    export default {
        // props: {
        //     status,
        // },
		created() {
			// if (this.statusLoading == true) {
			// 	var that = this
			// 	setTimeout(function(){
			// 		that.statusLoading = false
			// 	},500)
			// }
		},
        data() {
            return {
                // statusLoading:true,
            };
        },
		// watch:{
		// 	status(val, newval) {
		// 		this.statusLoading = val
		// 	}
		// },
		methods: {
			onCheckHiddenApi() {
				this.statusLoading = false
			}
		}
    }
</script>

<style lang="scss">
    .dengLoadingVue {
        .maskVueHiddenShow {
            z-index: 999999;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
			background-color: rgb(255,255,255);
            display: flex;
            align-items: center;
            justify-content: center;
            .maskVueHiddenShowWrapper {
                width: 80%;
                height: 300rpx;
                position: fixed;
				top: 15%;
				left: 50%;
				transform: translateX(-50%);
				animation:0.5s;
				.loding{
					width: 100%;
					text-align: center;
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
				}
            }
        }
    }
		.loader {
				position: absolute;
				top: calc(50% - 32px);
				left: calc(50% - 32px);
				width: 64px;
				height: 64px;
				border-radius: 50%;
				perspective: 800px;
			}
			
			.inner {
				position: absolute;
				box-sizing: border-box;
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
			
			.inner.one {
				left: 0%;
				top: 0%;
				animation: rotate-one 1s linear infinite;
				border-bottom: 3px solid #64b6a8;
			}
			
			.inner.two {
				right: 0%;
				top: 0%;
				animation: rotate-two 1s linear infinite;
				border-right: 3px solid #64b6a8;
			}
			
			.inner.three {
				right: 0%;
				bottom: 0%;
				animation: rotate-three 1s linear infinite;
				border-top: 3px solid #64b6a8;
			}
			
			@keyframes rotate-one {
				0% {
					transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
				}
			
				100% {
					transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
				}
			}
			
			@keyframes rotate-two {
				0% {
					transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
				}
			
				100% {
					transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
				}
			}
			
			@keyframes rotate-three {
				0% {
					transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
				}
			
				100% {
					transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
				}
			}
	@keyframes maskVueHiddenShowWrapper {
	    0%   {width:80%}
	    100% {width:0}
	  }
</style>
